Researchers and designers: Fabienne Heijne

To practice with UX/UI design I did a case study for a contest on Crowwwn.com. All the aspects of the study I conducted myself. In one week I finished the first digital design, this is the design which I submitted for the contest. After one week I still wanted to improve my skills, so I continued the research without having a chance to win with the final design.

The app provides information about locations where people can buy locally produced vegetables and give people the opportunity to buy those products online. In my final design people can see which farms provide locally produced foods, they can choose which products they would like to buy from a selection provided by each farm. In the app they can order those products, pay and pick it up at a chosen timeslots. At the farm someone will make the package ready for pick up.

In the first design I solved this problem by visualizing the farms on a map, by providing a filter for products, area, price and sellers (farm, supermarket, market). The app should provide an ordered list of chosen products in a shopping list, an ordered list of selling points and the app should give the opportunity to export and share files, like the shopping list or a route. 

I emphasized with the users and created two personas. To emphasize with the users I did some quick research on what kind of people would like to buy locally produced vegetables. I found out that probably the main users are people who really care about nature, environment and local economy, and people who care less. I expect that the last group only wants to use the app if is does not take too much effort to buy those locally produced products.

Customers who would like to buy locally produced products have no overview of where they can buy those products.

Customers don't know which products they can buy at which location. Buying at several locations is inefficient and not tempting.

Margaret wants to buy her groceries locally. She loves nature and wants to take care of it, therefor she eats organic foods if possible. In the app she wants to see which farmers are selling organic vegetables, before she decides to buy her groceries there. 

She opens the app and on the map she can see which farms have an organic certificate. In the app she can see which products the farmers sell and she can click them to add those products to her shopping list. She also wants to be able to delete products if she changes her mind or when she made a mistake. Before paying she wants to check if her shopping list is correct.

With the new requirements and feedback I designed a more detailed scenario and a third concept with the feedback that I received. I implemented the following aspects. A map with selling points, a filter (area, price, seller), ordered lists of chosen products and chosen selling points. The app could be able to share files, export routes and export the shopping list. The last option is only necessary if there would not be an opportunity to order the products in the app.

Margaret wants to buy her groceries locally. She loves nature and want to take care of it, therefor she eats organic foods if possible. In the app she wants to see which farmers are selling organic vegetables, before she decides to buy her groceries there. 

She opens the app and on the map she can see which farms have an organic certificate. She clicks those farmers. After she clicked NEXT she sees a list of the farms, she can click on each of them to see their assortments. She notices already that farm #1 sells almost all products that she would like to buy. Farm #2 mostly sells products that she does not want to buy, so she clicks BACK and swipes Farm #2 to the right to delete it. Farm #3 has a slightly different assortment than Farm #1. she decides that she needs to buy her groceries at both farms, only Farm #3 has no organic certificate. In the overview she clicks Farm #1 to make this her favorite farm, it will always show up first from now on.

She clicks Farm #1 again to open the assortment list and adds the vegetables and fruit that she wants to buy there. She sees in the right side that 0's change into higher number when she clicks the + signs left of the vegetables. When she clicks on the name an overlay opens with information about the product. She added too many bananas and she easily removes them one by one by clicking the - sign on the right of the counter.

When she is finished with Farm #1, she clicks back to return to the overview. In the assortment list of Farm #3 she also clicks the groceries that she wants. In none of the lists she can find Zucchini. In the top of the screen she clicks on the search bar. The start screen with the map opens again and shows her which farms sell zucchini, it turns out that Farm #3 sells this product, Margaret just did not see it. She clicks on the farm and automatically the product is added to her shopping list and the app brings her back to the assortment list of farm #3. After clicking everything that she wants, she slicks in the overview on the button SHOPPING LIST. In this list all the products are shown per farm.

She checks if everything is correct and clicks CHECKOUT. Here she choses at which timeslots she wants to pick up her orders on the different locations. By clicking on PAY the app takes her to her app for banking. After payment the app shows her this message: "Thank you for your order, Margaret. We are going to pack your groceries carefully for you and we will see you soon at the farm. We have sent you an email with all the details."

I translated my design into wireframes in Figma and tested the working prototype.

After testing the wireframes and the first prototype I got the following feedback.

The Shopping List-button should also be on the second screen. On the products screen the + and - signs should be next to each other, otherwise the + sign is not visible enough. The tests showed me that the volunteers were quite satisfied with the functionalities of this app. They all complained about the colors though, it was too dark. They would like to see something fresh.

The best feedback I got was that I had to follow the design guidelines, this gave the new design more breathing space and it looks more neat. Also I was recommended not to use round shapes yet.

I learned that it is very important to design according to the design guides, I did not know where to find those rules, but when I found them a world opened for me. Also I learned that it is important how to present research. Before my portfolio looked very boring, but now it is much easier to read and easier to scan. A very important other thing that I learned is that practice really improves skills, especially when you get feedback from professionals.